// import './index.less';
import { defineComponent } from 'vue';
import { performanceDetail } from '@/api/home';
// import '../../../style/index.less';
import {
  ElDatePicker,
  ElDialog,
  ElSelect,
  ElOption,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElTabs,
  TabPaneName,
  ElCheckboxGroup,
  ElCheckbox
} from 'element-plus';
export default defineComponent({
  name: 'ItemTable',
  props: ['is_team', 'team_name','all_team_name'],
  setup(props: any, { emit, slots, expose }) {
    const dialogVisible = ref(false);
    const isIndeterminate = ref(false);
    const checkedAll = ref(true);
    const searchParams = reactive({
      type: 1,
      date: new Date(),
      team_name: []
    }) as AnyObject;
    const column = ref({
      name: '月份',
      target: '月度目标（万元）',
      finish: '月度达成（万）',
      rate: '月度达成率'
    }) as any;
    const tableData = ref([]) as any;
    const params = ref({}) as AnyObject;
    const headerSlots = {
      header: () => (
        <ElTabs v-model={searchParams.type} onTabChange={handleChange}>
          <ElTabPane label="月度目标" name={1}></ElTabPane>
          <ElTabPane label="季度目标" name={2}></ElTabPane>
          <ElTabPane label="年度目标" name={3}></ElTabPane>
        </ElTabs>
      )
    };

    const handleChange = (val: TabPaneName) => {
      searchParams.type = val;
      searchParams.date = new Date();
      getPermormanceDetail();
      switch (val) {
        case 1:
          return (column.value = {
            name: '月份',
            target: '月度目标（万元）',
            finish: '月度达成（万）',
            rate: '月度达成率'
          });
        case 2:
          return (column.value = {
            name: '季度',
            target: '季度目标（万元）',
            finish: '季度达成（万）',
            rate: '季度达成率'
          });
        default:
          return (column.value = {
            name: '年度',
            target: '年度目标（万元）',
            finish: '年度达成（万）',
            rate: '年度达成率'
          });
      }
    };
    const getPermormanceDetail = () => {
      const year = searchParams.date.getFullYear();
      const team_name = searchParams.team_name.join(",");
      performanceDetail({
        is_team: props.is_team,
        year,
        team_name,
        type: searchParams.type
      }).then((res) => {
        tableData.value = res.data;
      });
    };
    const selectChange = (val: any) => {
      JSON.stringify(val) === '[""]' && (searchParams.team_name = []);
      getPermormanceDetail();
      window.event?.preventDefault();
      return false;
    };
    const handleCheckAll = (val: boolean) => {
      checkedAll.value = !checkedAll.value;
      searchParams.team_name = checkedAll.value ? props.all_team_name : [];
      isIndeterminate.value = false;
    };
    // 线路下拉框选择事件
    const handleSelect = (value = []) => {
      console.log("触发不了");
      const checkedCount = value.length;
      checkedAll.value = checkedCount === props.all_team_name.length;
      
      isIndeterminate.value = checkedCount > 0 && checkedCount < props.all_team_name.length;
  }
    watch(
      () => dialogVisible.value,
      (val: boolean) => {
        if (val) {
          searchParams.date = new Date();
          searchParams.team_name = JSON.parse(JSON.stringify(props.team_name));
          getPermormanceDetail();
        }
      }
    );
    expose({ dialogVisible });
    return () => (
      <ElDialog
        lock-scroll
        draggable
        v-model={dialogVisible.value}
        style={{ maxWidth: '800px', with: 'auto' }}
        v-slots={headerSlots}
        class="cus_dialog"
      >
        <div class="item_right">
          {props.is_team == 1 && (
            <ElSelect
            style={{width:"280px"}}
              v-model={searchParams.team_name}
              multiple
              collapse-tags
              onChange={selectChange}
              max-collapse-tags={2}
            >
              {/* <ElCheckboxGroup v-model={searchParams.team_name} onChange={handleCheckAll}>

                        </ElCheckboxGroup> */}
              <ElOption class="all_member_option" label="全员" value="">
                {/* @ts-ignore */}
                <ElCheckbox
                  indeterminate={isIndeterminate.value}
                  checked={checkedAll.value}
                  v-model={checkedAll.value}
                  // @ts-ignore
                  onClick={handleCheckAll}
                  label="全员"
                />
              </ElOption>
              <ElCheckboxGroup
                onChange={handleSelect as any}
                v-model={searchParams.team_name}
              >
                {props.all_team_name?.map((_name: string, _index: number) => (
                  <ElOption
                    class="other_member_option"
                    key={_index}
                    label={_name}
                    value={_name}
                  >
                    <ElCheckbox label={_name} />
                  </ElOption>
                ))}
              </ElCheckboxGroup>
            </ElSelect>
          )}
          {searchParams.type != 3 && (
            <ElDatePicker
              v-model={searchParams.date}
              type="year"
              class="month_selector"
              range-separator="/"
              clearable={false}
              // @ts-ignore
              onChange={getPermormanceDetail}
            />
          )}
        </div>
        <ElTable
          header-row-class-name="table_header"
          size="small"
          data={tableData.value}
        >
          {Object.entries(column.value).map((_item: any) => (
            <ElTableColumn prop={_item[0]} label={_item[1]} />
          ))}
        </ElTable>
      </ElDialog>
    );
  }
});
